<template>
  <div class="content">
    <el-card v-if="isShow" class="report" shadow="never" style="border: none">
      <!-- <div slot="header" class="header">
                    <span>审核报告</span>
                    <div class="header_right">
                        <img src="@/assets/img/order_qr.png" alt="">
                        <img src="@/assets/img/order_ print.png" alt="">
                        <img src="@/assets/img/order_cancle.png" alt="">
                    </div>
                </div> -->
      <!-- 审核状态 -->
      <div v-if="dataObj.auditStatus == 1" class="report_status">
        <img src="@/assets/img/order_pass.png" alt="" />
        <span class="pass">{{ $t('caseorder.yulan.yulan31') }}</span>
      </div>
      <div v-if="dataObj.auditStatus == 2" class="report_status">
        <img src="@/assets/img/order_error.png" alt="" />
        <span class="pass">{{ $t('caseorder.yulan.yulan32') }}</span>
      </div>
      <!-- //医生信息 -->
      <el-row class="report_info">
        <el-col :span="12">
          <span>{{ $t('caseorder.yulan.yulan33') }}：{{ dataObj.doctorName || '--' }}</span>
        </el-col>
        <el-col :span="12">
          <span>{{ $t('caseorder.yulan.yulan34') }}：{{ dataObj.orderDataTypeName || '--' }}</span>
        </el-col>
      </el-row>
      <el-row class="report_info">
        <el-col :span="12">
          <span>{{ $t('caseorder.yulan.yulan35') }}：{{ dataObj.contactWay || '--' }}</span>
        </el-col>
        <el-col :span="12">
          <span>{{ $t('caseorder.yulan.yulan36') }}：{{ dataObj.orderStatusName || '--' }}</span>
        </el-col>
      </el-row>
      <!-- 患者信息 -->
      <el-row class="report_title">
        <span>{{ $t('caseorder.yulan.yulan37') }}</span>
      </el-row>
      <el-row class="report_info">
        <el-col :span="12">
          <span>{{ $t('caseorder.yulan.yulan38') }}：{{ patientObj.name || '' }}</span>
        </el-col>
        <el-col :span="12">
          <span>{{ $t('caseorder.yulan.yulan39') }}：{{ patientObj.age || '' }}</span>
        </el-col>
      </el-row>
      <el-row class="report_info">
        <el-col :span="12">
          <span>{{ $t('caseorder.yulan.yulan40') }}：{{ patientObj.id || '' }}</span>
        </el-col>
        <el-col :span="12">
          <span
            >{{ $t('caseorder.yulan.yulan41') }}：{{
              patientObj.sex == '0' ? $t('caseorder.yulan.yulan42') : $t('caseorder.yulan.yulan43')
            }}</span
          >
        </el-col>
      </el-row>
      <el-row class="report_info">
        <span>{{ $t('caseorder.yulan.yulan44') }}：{{ patientObj.caseBeforeRemark || '' }}</span>
      </el-row>
      <el-row class="report_info">
        <span>{{ $t('caseorder.yulan.yulan45') }}：{{ patientObj.caseAllergy || '' }}</span>
      </el-row>
      <el-row class="report_info">
        <span>{{ $t('caseorder.yulan.yulan46') }}：{{ patientObj.mouthHabitRemark || '' }}</span>
      </el-row>
      <el-row class="report_info">
        <span>{{ $t('caseorder.yulan.yulan47') }}：{{ patientObj.remark || '' }}</span>
      </el-row>
      <!-- 牙位 -->
      <el-row class="report_title">
        <span>{{ $t('caseorder.yulan.yulan48') }}</span>
      </el-row>
      <el-row class="report_yaWei">
        <div v-if="mouthImgs.length >= 1" class="yaWei_left">
          <img :src="mouthImgs[0].url" alt="" />
          <!-- <el-image :src="require('@/assets/img/login/bg_left.png')" fit="cover"></el-image> -->
        </div>
        <div class="yaWei_right">
          <div v-if="mouthImgs.length >= 2" class="yaWei_separate_item">
            <img :src="mouthImgs[1].url" alt="" />
            <!-- <el-image :src="require('@/assets/img/login/bg_left.png')" fit="contain"></el-image> -->
            <span>{{ $t('caseorder.yulan.yulan49') }}</span>
          </div>
          <div v-if="mouthImgs.length >= 3" class="yaWei_separate_item">
            <img :src="mouthImgs[2].url" alt="" />
            <!-- <el-image :src="require('@/assets/img/login/bg_left.png')" fit="contain"></el-image> -->
            <span>{{ $t('caseorder.yulan.yulan50') }}</span>
          </div>
        </div>
      </el-row>
      <!-- 审核报告 -->
      <el-row class="report_title">
        <span>{{ $t('caseorder.yulan.yulan51') }}</span>
      </el-row>
      <el-row class="report_data">
        <!-- //标题 -->
        <div class="report_data_header">
          <p class="title">{{ $t('caseorder.yulan.yulan52') }}(0)</p>
          <p>{{ $t('caseorder.anli63') }}</p>
        </div>
        <div class="report_data_header">
          <p class="title">{{ $t('caseorder.yulan.yulan53') }}(2)</p>
          <p>{{ $t('caseorder.anli63') }}</p>
        </div>
        <!-- 备注： -->
        <div v-for="(item, index) in dataAuditList" :key="index" class="report_data_mark">
          <p>{{ $t('caseorder.yulan.yulan54') }}{{ index + 1 }}</p>
          <span>{{ item.content }}</span>
          <div class="report_data_img">
            <el-image
              v-if="item.imgUrl"
              class="order_preview_inner_img"
              style="width: 206px; height: 159px"
              :src="item.imgUrl"
              fit="contain"
            />
            <!-- <el-image class="order_preview_inner_img" style="width: 206px; height: 159px"
                            :src="require('@/assets/img/login/bg_left.png')" fit="contain"></el-image> -->
          </div>
        </div>
      </el-row>
      <!-- 底部按钮 -->
      <!-- <el-row class="report_data" style="display:flex;justify-content: flex-end;">
                <el-button :size="tableButtonSize" @click="reportBackHandle()">返 回</el-button>
            </el-row> -->
    </el-card>
  </div>
</template>

<script>
import Cookies from 'js-cookie';

export default {
  name: 'BLZMasterReportresult',

  data() {
    return {
      dialogShow: false,
      dataObj: {}, // 详情数据
      patientObj: {},
      mouthImgs: [],
      dataAuditList: [],
      isShow: false,
    };
  },

  created() {
    this.getTargetDeptName();
  },

  methods: {
    getTargetDeptName() {
      this.$http
        .get(`/order/selectAuditReportDetail?id=${this.$route.query.id}&token=orderDataAuditReport`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.dataObj = res.data.order;
            this.patientObj = res.data.patient;
            this.mouthImgs = JSON.parse(res.data.order.mouthImgs);
            this.dataAuditList = res.data.dataAuditList;
            this.isShow = true;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    reportBackHandle() {
      this.$emit('audiChildren', false);
    },
  },
};
</script>

<style lang="scss" scoped>
// 报告
.content {
  width: 100vw;
  height: 100vh;
  overflow: auto;
}

.report {
  background-color: white;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header_right {
      position: relative;

      img {
        cursor: pointer;
        width: 16px;
        height: 16px;
      }

      img:nth-child(1) {
        margin-right: 20px;
      }

      img:nth-child(2) {
        margin-right: 40px;
      }
    }
  }

  //报告状态显示
  .report_status {
    display: flex;
    flex-direction: column;
    margin-bottom: 36px;
    align-items: center;

    img {
      margin-bottom: 30px;
      width: 89px;
      height: 89px;
    }

    .pass {
      font-size: 46px;
      font-weight: 500;
      line-height: 14px;
      color: #65aa37;
    }
  }

  .report_title {
    font-size: 26px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 40px;
    color: #333333;
    margin: 20px 0;

    span {
      font-size: 26px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }

  .report_info {
    span {
      font-size: 26px;
      font-weight: 400;
      line-height: 36px;
      color: #000000;
    }
  }

  .report_yaWei {
    display: flex;
    // justify-content: space-around;
    // width: 100%;
    // height: 330px;

    .yaWei_left {
      // background-color: red;
      width: 50%;

      // flex: 1;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .yaWei_right {
      margin-left: 20px;
      width: 50%;
      flex: 1;
      display: flex;
      flex-wrap: wrap;

      .yaWei_separate_item {
        position: relative;
        overflow: hidden;
        width: 100%;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          position: absolute;
          left: 0;
          top: 0;
        }

        span {
          position: absolute;
          right: 0;
          top: 0;
          background: #e59740;
          border-radius: 0px 0px 0px 3px;
          padding: 4px 10px;
          font-size: 24px;
          font-weight: 400;
          color: #ffffff;
        }
      }

      .yaWei_separate_item:nth-child(1) {
        margin-bottom: 10px;
      }
    }
  }

  .report_data {
    .report_data_header {
      background-color: #f5f5f5;
      padding: 16px 24px;
      margin-bottom: 16px;

      p {
        font-size: 26px;
        font-weight: 500;
        color: #333333;
      }

      .title {
        font-size: 26px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        opacity: 1;
      }
    }

    .report_data_mark {
      p {
        line-height: 40px;
        font-size: 26px;
        font-weight: 500;
        color: #333333;
      }

      span {
        font-size: 26px;
        font-weight: 400;
        line-height: 36px;
        color: #333333;
      }

      .report_data_img {
        display: flex;
        margin: 16px;
      }
    }
  }
}
</style>
